<template>
  <div class="GoodDetail">
    <div class="title-contatin">
      <div class="title">
        {{goodDetail.goods_name}}
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div class="pic-contain">
          <img :src="goodDetail.goods2content_content">
          <el-button type="primary" size="middle">实时预览</el-button>
        </div>
        <div class="content">
          <div class="buttons">
            <el-radio-group v-model="tabs" style="margin-bottom: 30px;">
              <el-radio-button label="description">描述</el-radio-button>
              <el-radio-button label="updateLog">更新日志</el-radio-button>
            </el-radio-group>
          </div>
          <div class="content-main">
            <p>{{tabs === 'description'?goodDetail.des.desTitle:goodDetail.log.logTitle}}</p>
            <p>{{tabs === 'description'?goodDetail.des.desContent : goodDetail.log.logContent}}</p>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="attr">
          <div class="title">{{goodDetail.type_name}}属性</div>
          <div class="attr-content">
            <div class="attr-items" v-for="(value,key) in goodDetail.detail" :key="key">
              <div class="attrKey">{{key}}:</div>
              <div class="attrValue">{{value}}</div>
            </div>
          </div>
        </div>
        <div class="seller">
          <div class="title">卖家</div>
          <div class="seller-content">
            <div class="seller-pic">
              <img :src="userPic" />
            </div>
            <div class="seller-des">
              <p>{{goodDetail.shop_name}}</p>
              <p>{{goodDetail.sellDate}}开通会员</p>
            </div>
          </div>
        </div>
        <div
          v-if="goodDetail.goods_status !== 2"
          :class="{'addCart': true, 'collected': goodDetail.isCollected}"
          @click="() => { goodDetail.isCollected? handleMoveCollect() : handleCollect() }"
        >
          <div>
            <div v-if="goodDetail.isCollected">
              已收藏
            </div>
            <div v-else>
              <i class="iconfont icon-add" /> 收藏宝贝
            </div>
          </div>
        </div>
        <div class="addCart" v-if="!isMyGood && goodDetail.goods_status !== 2" @click="handleAddCart">
          <div>
            <i class="iconfont icon-add" /> 加入购物车
          </div>
        </div>
        <div class="price" v-if="!isMyGood && goodDetail.goods_status !== 2" @click="handleOrderDetail">
          <div class="price-left">
            ¥ {{goodDetail.goods_price}}
          </div>
          <div class="price-right">
            结算 >>
          </div>
        </div>
        <div class="addCart lossGood" v-if="!isMyGood && goodDetail.goods_status === 2">
          <div>
            商品已下架
          </div>
        </div>
        <div class="addCart" v-if="isMyGood" @click="handleVisible({visible: true})">
          <div>
            修改宝贝信息
          </div>
        </div>
        <div class="addCart" v-if="isMyGood" @click="handleStatuModal(true)">
          <div>
            {{currentStatu}}
          </div>
        </div>
      </div>
    </div>
    <edit-modal :visible="edit_visible" @close="handleVisible({visible: false})" :good="goodDetail" />
    <statu-modal :visible="statu_visible" @close="handleStatuModal(false)" :good="goodDetail"/>
  </div>
</template>

<script>
import EditModal from './EditModal';
import StatuModal from './StatuModal';
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  name: '',
  components: {
    EditModal,
    StatuModal
  },
  computed: {
    ...mapState({
      edit_visible: state => state.shop.visible,
      goodDetail: state => state.good.goodDetail,
      userInfo: state => state.user.userInfo,
      login: state => state.user.login
    }),
    isMyGood () {
      return this.goodDetail.sellerId === this.userInfo.shop_id
    },
    currentStatu () {
      switch (this.goodDetail.goods_status) {
        case 0:
          return '待上架';
        case 1:
          return '上架中';
        case 2:
          return '已下架';
        default: return '错误,请重新添加!'
      }
    },
  },
  created () {
    if(localStorage.userInfo){
      this.fetchGoodsDetail({ 
        user_id: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id, 
        goods_id: this.$route.query.goods_id
      });
    }else{
      //user_id只为了收藏相关
      this.fetchGoodsDetail({ 
        user_id: '', 
        goods_id: this.$route.query.goods_id
      });
    }
  },
  data () {
    return {
      userPic: require("@/assets/user.png"),
      statu_visible: false,
      tabs: 'description',
    };
  },
  methods: {
    ...mapMutations({
      //在Shop模块里
      handleVisible: 'saveVisible',
    }),
    ...mapActions([
      'fetchGoodsDetail', 
      'fetchAddToCart', 
      'fetchCollect', 
       //在收藏模块中 宝贝移出收藏
      'fetchDeleteGoods'
    ]),
    handleStatuModal (visible) {
      this.statu_visible = visible;
    },
    handleCollect () {
      if(this.userInfo.user_id){
        this.fetchCollect({user_id: this.userInfo.user_id, goods_id: this.$route.query.goods_id});
      }else{
        this.$message({
          type:'error',
          message: '请先登录',
          showClose: true
        });
      }
    },
    handleOrderDetail () {
      if(this.userInfo.user_id){
         this.$router.push({ name: 'MyOrderDetail', params: { good: this.goodDetail, whichPage: 'Detail' } });
      }else{
        this.$message({
          type:'error',
          message: '请先登录',
          showClose: true
        });
      }
    },
    handleAddCart(){
       if(this.userInfo.user_id){
         this.fetchAddToCart({user_id: this.userInfo.user_id, goods_id: this.$route.query.goods_id});
        }else{
          this.$message({
            type:'error',
            message: '请先登录',
            showClose: true
          });
        }
    },
    handleMoveCollect(){
      this.fetchDeleteGoods({ 
        user_id: this.userInfo.user_id, 
        goods_idList: [ this.$route.query.goods_id ] 
      });
    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss" />
<style lang='scss'>
.pic-contain {
  .el-button--primary {
    padding: 9px 20px !important;
    width: 100px !important;
    border-radius: 8px !important;
  }
}
</style>